<template>
  <div class="outCoor">
    <div class="navbox">
      <el-row>
        <el-col :span="24">
          <div class="homeNav">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/Outcoor' }">合作</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{path:'/outcoor'}">德国合作</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
        </el-col>
      </el-row>
    </div>
    <div class="outcoorContent">
       <el-row :gutter="20">
            <el-col :span="16">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>与德国合作</span>
                </div>
                    <el-col :span="8" v-for="(item,index) in outCoorList" :key="item" :offset="index > 0 ? 2 : 0">
                      <el-card>
                         <el-image
                           :src="item.url" class="image"
                           :fit="fit">
                         </el-image>
                        <p style="text-align:center;">{{item.name}}</p>
                      </el-card>
                    </el-col>
              </el-card>
            </el-col>
            <el-col :span="8">
                <div class="home_right">
                    <div class="homeList">
                        <ul>
                            <li>
                                <router-link to="/culture"><span class="sLeft">德国合作</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                            <li>
                                <router-link to="/culture"><span class="sLeft">国内合作</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                            <li>
                                <router-link to="/culture"><span class="sLeft">合作伙伴</span><span class="sright">>></span></router-link>
                            </li>
                              <el-divider></el-divider>
                              <li>
                                <router-link to="/culture"><span class="sLeft">调研交流</span><span class="sright">>></span></router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="homeConnect">
                        <p class="connect_h">联系我们</p>
                        <el-divider></el-divider>
                        <p>电话：86-10-68005755,86-10-68006083</p>
                        <p>E-mail:xmbj2005@163.com</p>
                        <p>邮箱:492800904@qq.com</p>
                        <p>地址：北京市西城区西直门外大街18号金贸大厦A座935</p>
                        <P>
                            <img src="../assets/code.jpg"
                                 alt="" />
                        </P>
                    </div>
                </div>
           </el-col>
             <!-- 联系方式结束 -->
        </el-row>
    </div>
  </div>
</template>
<script>
   export default{
     data(){
       return{
        outCoorList:[
          {url:require("../assets/dg.jpg"),name:'德国医院协会'},
          {url:require("../assets/dg1.jpg"),name:'德国医药总会'},
          {url:require("../assets/dg2.jpg"),name:'德国富尔达大学'},
          {url:require("../assets/gj1.jpg"),name:'国家卫生健康委医院管理所'},
          {url:require("../assets/gj2.jpg"),name:'国家卫生健康委卫生事业发展中心'},
          {url:require("../assets/gj3.jpg"),name:'西安交通大学'},
        ],
       }
     },
     mthods:{

     }
   }
</script>
<style lang="less">
* {
  padding: 0;
  margin: 0;
}
.outCoor{
  width:100%;
  .navbox{
      .el-row {
        .el-col {
            .homeNav {
                width: 100%;
                margin: 3.125rem /* 50/16 */;
            }
        }
    }
  }
  .outcoorContent{
    margin-left:3.125rem;
    .el-row{
      .el-col{
        .box-card{
          .el-col{
            margin:0 1.875rem /* 30/16 */;
            .el-card{
              width:23.75rem /* 380/16 */;
              margin:1.875rem /* 30/16 */;
              margin-left:1.25rem /* 20/16 */;
              img{
              }
              img:hover{
                transform:scale(1.5);
              }
              p{

              }
            }
          }
        }
      }
        .el-col {
            .home_right {
                width: 100%;
                margin-left: 3.125rem /* 50/16 */;
                .homeList {
                    text-align: center;
                    margin-bottom: 1.875rem /* 30/16 */;
                    ul {
                        background-color: #0a77a0;
                        width: 50%;
                        text-align: left;
                        li {
                            list-style: none;
                            height:1.25rem /* 20/16 */;
                            line-height: 1.25rem /* 30/16 */;
                            padding: 0.9375rem /* 15/16 */;
                            a {
                                text-decoration: none;
                                color: #fff;
                                .sLeft {
                                    float: left;
                                }
                                .sright {
                                    float: right;
                                }
                            }
                        }
                    }
                }
                .homeConnect {
                    width: 100%;
                    .connect_h {
                        color: #0a77a0;
                    }
                    p {
                        line-height: 1.875rem /* 30/16 */;
                    }
                }
            }
        }
    }
  }
}
</style>
